import React, { Component } from "react";
import "./index.scss";
import { get } from "../../utils/Axios";
import {
  Map,
  Marker,
  NavigationControl,
  ZoomControl,
  Label,
  ScaleControl,
} from "react-bmapgl"; // 地图

import whiteStyle from "../../assets/map/custom_map_config.json"; // 主题
import customOverLay from "./index.module.css";
import MyBottomMsg from "../MyBottomMsg";
import { Toast } from "antd-mobile";
// 覆盖物样式
const labelStyle = {
  cursor: "pointer",
  border: "0px solid rgb(255, 0, 0)",
  padding: "0px",
  whiteSpace: "nowrap",
  fontSize: "12px",
  color: "rgb(255, 255, 255)",
  textAlign: "center",
};
// 覆盖物样式2
const labelStyle2 = {
  backgroundColor: "rgb(255, 0, 1,0)",
  cursor: "pointer",
  border: "0px solid rgb(255, 0, 1)",
  padding: "0px",
  whiteSpace: "nowrap",
  fontSize: "12px",
  color: "rgb(255, 255, 255)",
  textAlign: "center",
};

class MyMap extends Component {
  state = {
    lat: 31.19590789948458,
    lng: 121.46361496402963,
    zoom: "11",
    areaMap: [],
    level: 0,
    pre: "",
    showMsg: false,
    MsgInfo: [],
  };

  // 初始化位置
  initMap = async () => {
    const { label, value } = JSON.parse(localStorage.getItem("cache_city_msg"));
    var myGeo = new window.BMapGL.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野

    myGeo.getPoint(
      label,
      (point) => {
        if (point) {
          this.setState({
            lat: point.lat,
            lng: point.lng,
          });
        } else {
          alert("您选择的地址没有解析到结果！");
        }
      },
      label
    );
    Toast.loading("地图装载中~~", 9999);

    await get("/area/map", {
      id: value,
    }).then((result) => {
      Toast.hide();
      this.setState({
        level: 1,
        areaMap: result.data.body,
      });
    });
  };

  // 地区点击
  mapClickHandler = (label, value, latitude, longitude) => {
    Toast.loading("地图装载中~~", 9999);

    get("/area/map", {
      id: value,
    }).then((result) => {
      Toast.hide();
      const { level } = this.state;
      let l = Number(level);
      var c = "11";
      if (level === 1) {
        c = "13";
      } else if (level === 2) {
        c = "14";
      }
      l += 1;
      this.setState({
        pre: value,
        lat: latitude,
        lng: longitude,
        zoom: c,
        level: l,
        areaMap: result.data.body,
      });
    });
  };

  componentDidMount() {
    this.initMap();
  }
  componentWillUnmount() {
    Toast.hide();
  }

  // 获取房屋信息
  getHouseInfo = (value) => {
    get("/houses", {
      cityId: value,
    }).then((result) => {
      this.setState({
        MsgInfo: result.data.body,
        showMsg: true,
      });
    });
  };

  render() {
    const { lat, lng, zoom, level, showMsg, MsgInfo } = this.state;

    return (
      <div className="mapWrapper">
        <Map
          enableRotate
          style={{ height: "100%" }}
          center={{ lng, lat }}
          zoom={zoom}
          enableTilt={true}
          mapStyleV2={{ styleJson: whiteStyle }}
        >
          <Marker position={{ lng, lat }} />
          {level !== 3
            ? // ? this.renderLevelTop
              this.state.areaMap.map((one) => {
                const { coord, count, label, value } = one;
                const { latitude, longitude } = coord;
                const _lat = Number(latitude);
                const _lng = Number(longitude);

                return (
                  <Label
                    id={value}
                    key={value}
                    offset={new window.BMapGL.Size(-35, -35)}
                    unit="px"
                    lat
                    position={{ lat: _lat, lng: _lng }}
                    text={`<div class="${customOverLay.bubble}">
               <p class="${customOverLay.name}">${label}</p>
                <p>${count}套</p></div>`}
                    style={labelStyle}
                    onClick={() => {
                      this.mapClickHandler(label, value, _lat, _lng);
                    }}
                  />
                );
              })
            : this.state.areaMap.map((one) => {
                const { coord, count, label, value } = one;
                const { latitude, longitude } = coord;
                const _lat = Number(latitude);
                const _lng = Number(longitude);
                return (
                  <Label
                    id={value}
                    key={value}
                    offset={new window.BMapGL.Size(-12, -12)}
                    unit="px"
                    lat
                    position={{ lat: _lat, lng: _lng }}
                    text={`<div class="${customOverLay.wrapper}">
             <p class="${customOverLay.xiaoquName}">${label}&nbsp;${count}套</p>
             `}
                    style={labelStyle2}
                    onClick={() => {
                      this.getHouseInfo(value);
                    }}
                  />
                );
              })}
          {/* 控件 */}
          <NavigationControl />
          <ZoomControl />
          <ScaleControl />
        </Map>
        {showMsg ? (
          <MyBottomMsg showMsg={showMsg} MsgInfo={MsgInfo}></MyBottomMsg>
        ) : (
          ""
        )}
      </div>
    );
  }
}

export default MyMap;
